<template>
    <div class="taskMoudle" v-loading="addAllBatchLoading">
        <div class="task-header">
            <span class="taskTxt" v-if="taskinfoData">当前任务：{{taskinfoData[0].task_name}} {{taskinfoData[0].task_status_str}} ({{taskinfoData[0].sub_set_name}})</span>
            <el-button size="small" class="task-switch" @click="$router.push({path:'/TaskMangeList'})">切换任务</el-button>
        </div>
        <div class="content" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
            <el-col :span="3" >
				<div class="addTask">
					 <el-button @click='dialogVisible = true'>新建任务</el-button>
					 <el-button @click='submitTask'>任务提交审核</el-button>
					 <div class="taskList">
						 <p class="taskTitle">任务列表</p>
						 <ul class="taskCont">
							 <li v-for="(item,index) in taskData" :key='index'  @click="changeBgc(item,index)" v-on:mouseenter="item.status = true" v-on:mouseleave="item.status = false" :class="{'taskActive':taskindex===index}">
								 <i class="el-icon-check fl" v-show="taskindex===index"></i>
								 <el-input class='fl' v-show="item.edit" v-model="item.task_name" placeholder="请输入内容" size="mini"></el-input>
								 <span class="fl txt" v-show="!item.edit">{{item.task_name}} <em>（{{taskStatus(item.task_status)}}）</em></span>
								 <div class="edit fl" v-show="item.status">
									 <i class="el-icon-edit-outline" v-show="!item.edit" @click='item.edit=true,taskModify(item,false)'></i>
									 <i class="el-icon-success" v-show="item.edit" @click='item.edit=false,taskModify(item,true)'></i>
									 <i class="el-icon-close" @click="taskDelete(item)"></i>
								 </div>
							 </li>
						 </ul>
					 </div>
				</div>
            </el-col>
             <el-col :span="21">
                <div class="task-screen clearfix">
<!--                    <div class="task-screen-2 pull-fl">
                        <el-button size="small" :disabled='queryData.flag ==2' @click="submitTaskList()">加入待提交列表</el-button>
                        <el-button size="small" :disabled='queryData.flag ==2' @click="submitTask">将任务提交审核</el-button>
                    </div>
                    <div class="task-screen-3 pull-fl">
                        <span v-html="state==1?'待审核的数据中：':'待处理的数据中：'"></span>
                        <span>
                            新增{{infoData?infoData.extend_info.task_info.new_data:0}}条,
                            修改{{infoData?infoData.extend_info.task_info.modify_data:0}}条, 
                            删除{{infoData?infoData.extend_info.task_info.delete_data:0}}条,
                        </span>
                        <span class="DangerColor">其中异常数据{{infoData?infoData.extend_info.task_info.abnormal_data:0}}条</span>
                    </div>
                    <span class="task-screen-4 pull-fr"> 已加入任务{{StatisticsData?StatisticsData.to_be_audited_count:0}}条</span>
                    <span class="task-screen-4 pull-fr"> 待处理的数据{{StatisticsData?StatisticsData.pending_count:0}}条,</span> -->
					<el-col :span="24" class="task-table">
							<div class="table-drag">
									<div id="box">
										<v-table v-on:task-table="taskTable" :queryData='queryData'>
											 <span slot="title" v-html="state==1?'待审核的数据中：':'待处理的数据中：'"></span>
											 <span slot="list">
												 新增{{localData?localData.new_data:0}}条,
												 修改{{localData?localData.modify_data:0}}条, 
												 删除{{localData?localData.delete_data:0}}条,
												 其中异常数据{{localData?localData.abnormal_data:0}}条
											 </span>
											 <div class="Paginations" slot="cont">
												 <span class="pull-fl">翻页：</span>
												 <p class="menu3 pull-fl">
														 <em>显示数量：</em>
														 <el-input-number v-model="NewDataList.page_size" @change="changePageSize" :min="1" :max="pagination?pagination.total:1" label="输入条数"></el-input-number>
												 </p>
												 <p class="menu2 pull-fl"><label>共：</label><span>{{pagination?pagination.total:0}}条</span></p>
												 <el-button size="mini" class='btn' @click="NextPage">显示下{{NewDataList.page_size}}条</el-button>
												 <el-button size="mini" class='btn' @click="prevPage">显示上{{NewDataList.page_size}}条</el-button>
												 </div>
											</v-table>
									</div> 
									<div id="line"></div>
							</div>
					</el-col>
										
                </div>
                <div class="task-content" id="taskContent">
                    <el-col :span="24" class="task-map">
						<el-col :span="20" ><v-map ></v-map></el-col>
						<el-col :span="4" ><v-tree v-on:task-tree="taskTree" :infoData='infoData'></v-tree></el-col>
                    </el-col>
                </div>
            </el-col>
        </div>
		<el-dialog
			title="任务列表"
			:visible.sync="dialogVisible"
			width="30%"
			@close='closeTask'>
			<el-input v-model.trim="taskInput" placeholder="请输入内容"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeTask">取 消</el-button>
				<el-button type="primary" @click="newTask">确 定</el-button>
			</span>
		</el-dialog>
    </div>
</template>

<script>
import Tree from '../common/TaskModule/tree.vue'
import Map from '../common/TaskModule/map.vue'
import Table from '../common/TaskModule/table.vue'
import Words from '../../services/Words.js'
import bus from '../common/bus';
import TaskMangeService from '../../services/TaskMangeService.js';
import gcoord from 'gcoord';
export default {
   components: {
       'v-tree':Tree,
       'v-map':Map,
       'v-table':Table,
    },
    data() {
        return {
          addAllBatchLoading:false,
          TaskMangeService:new TaskMangeService(),
          Words: new Words(),
          infoData:null,
		  localData:JSON.parse(localStorage.getItem('batchInfo')),
          StatisticsData:null,
          addTaskData:null,
          selectTaskDataList:[],
          queryData:this.$route.query,
          state:1,
          loading:true,  
          TreeData:[],
          pagination:{},
          getCheckedNodes:[],
          NewDataList:{
            batch_id:this.$route.query.batch_id?parseInt(this.$route.query.batch_id):360,
            check_status:null,
            audit_status:null,
            page_index: 1,
            page_size: 10,
            geo_layers: []
          },
          Heights:0,		
			taskinfoData:null,
			dialogVisible:false,
			taskInput:'',
			taskData:[],
			taskId:null,
			taskindex:'',
			taskTableData:[],
			taskTableList:[],
        }
    },
    computed:{
    
    },
    created() {
//         this.taskDetail();
//         this.taskStatistics()
    },
    mounted() {
        let _this=this;
        this.tableDrag();
        bus.$on('load', function (content) {
            _this.loading=content
        })
        //点击左右鼠标；
        bus.$on('LeftJson', (res)=>{
            this.addTaskData = res;
        });
        bus.$on('RightJson', (res)=>{
            let flag = this.queryData?this.queryData.flag == 1:null; 
            if(flag){
                // this.submitTaskList(res) 
            }else{ 
                this.$message.warning('查看状态请勿操作')
            }
        });
        //选择提交列表操作；
        bus.$on('selectTaskData', (res)=>{
            this.taskSubmitListAPI(res)
        });
        bus.$on('loading', (val)=>{
            this.addAllBatchLoading = val
        });
        //select框选择；
        bus.$on('SelectOptions', (res)=>{
            this.NewDataList.check_status = res.check_status;
            this.NewDataList.audit_status = res.audit_status;
            this.NewDataList.page_index = 1;
            this.NewList()
        });
				
				// 获取地图中选中的数据
				bus.$on('selectedData', (res)=>{
						this.taskTableList = res;
				});
				bus.$on('selectedInfo', (res)=>{
						this.taskTableData = res;
				});
			
				//重构
				this.obtainTask();
				// this.taskDetail();

    },
    methods:{
        //任务提交API
        async taskAuditAPI(paramData){
            let res = await this.TaskMangeService.task_audit(paramData)
            if(res.code==200){
                this.$message.success(res.msg);
                 this.$router.push({path:'/TaskMangeList'})
            }else{
                this.$message.error(res.msg);
            }
        },
        //获取数据处理的统计情况；
        async taskStatistics(){
            let paramData ={id:Number(this.queryData.task_id)};
            let res = await this.TaskMangeService.task_statistics(paramData)
            if(res.code==200){
                this.StatisticsData = res.data
            }else{
                this.$message.error(res.msg);
            }
        },
        //获取任务详情
        async taskDetail(){
            let paramData ={id:Number(this.queryData.batch_id),for_audit:false};
            let res = await this.TaskMangeService.task_detail(paramData)
            if(res.code==200){
                this.infoData = res.data;
            }else{
                this.$message.error(res.msg);
            }
        },
        //加入待提交列表API
        async taskSubmitListAPI(paramData){
            let res = await this.TaskMangeService.task_submitList(paramData)
            if(res.code==200){
                this.$message.success(res.msg);
                this.taskStatistics();
                this.NewList();
            }else{
                this.$message.error(res.msg);
            }
        },
//         submitTask(){
//           let parseData ={id:this.queryData.task_id};
//           this.taskAuditAPI(parseData);
//         },

        //添加待提交列表；
//         submitTaskList(res){
//             let addTaskData = res?res:this.addTaskData;
//             let paramData = {};
//             let array =[];
//             array.push(addTaskData.id)
//             paramData.data_ids = array;
//             paramData.submitted = addTaskData.submitted;
//             this.taskSubmitListAPI(paramData);
//         },
        //页面显示个数
        changePageSize(val){
            this.NewDataList.page_size=val;
            this.NewList();
        },

        //下一页；
        NextPage(){
            if(this.pagination.page_index<this.pagination.page_count){
                this.NewDataList.page_index += 1;
                this.NewList();
            }else{
                this.$message.warning('已经是最后一页了')
            }
        },
        //显示上一页
        prevPage(){
            if(this.pagination.page_index>1){
                this.NewDataList.page_index -= 1;
                this.NewList();
            }else{
                this.$message.warning('没有上一页了')
            }
        },
        taskTree(data,CheckedNodes){
          // this.getCheckedNodes=CheckedNodes;
          this.NewDataList.geo_layers=data;
          this.NewList();
        },

        //返回新数据列表
        async NewList(){
            this.NewDataList.batch_id=Number(this.queryData.batch_id);
            // this.NewDataList.is_modified=false;
            let res = await this.TaskMangeService.task_contentsInfo(this.NewDataList);
            if(res.code == 200){
                this.pagination = res.data.pagination;
                bus.$emit('pagination',res.data.pagination)
                if(res.data.batch_list[0]!=undefined){
                    let geoJson=JSON.parse(JSON.stringify(res.data.batch_list[0].geo_json));
                    var result = gcoord.transform(geoJson,gcoord.WebMercator,gcoord.BD09 );
                    this.TemporaryPoint=this.DataContrast(result.coordinates,result.type);
                }else{
                    this.TemporaryPoint=[] 
                }
                bus.$emit('Treedata', this.gcoordInfo(res.data.batch_list),this.TemporaryPoint);
            
            }
        },
        //数据类型对比
        DataContrast(cont,type){
            var x=[];
            switch (type)
            {
            case 'Point':x=[cont[0],cont[1]];
            break;
//             case 'MultiLineString':x=[cont[0][0][0],cont[0][0][1]];
//             break;
            case 'MultiPolygon':x=[cont[0][0][0][0],cont[0][0][0][1]];
            break;
				case 'Polygon':x=[cont[0][0][0],cont[0][0][1]];
				break;
				case 'LineString':x=[cont[0][0],cont[0][1]];
				break;
            }
            return x;
        },

        //地图坐标转化
        gcoordInfo(content){
            this.NewData=[];
            if(content!=[]){
            for(let i=0;i<content.length;i++){
                var newLayer=content[i].geo_layer;
                var newGeojson = content[i].geo_json;
                gcoord.transform( newGeojson, gcoord.WebMercator,gcoord.BD09 );
                let Maplist={
                ColorProperty:this.ColorContrast(content[i]) || 106000,
                geo_layer:newLayer,
                Point:newGeojson.coordinates,
                type:content[i].geo_json.type,
                rest:content[i],
								logintxt:this.$route.path,
                }
                this.NewData.push(Maplist)
            }
            }
            return this.NewData
        },

        ColorContrast(data){
            var x='';
            if(data.submitted==false){
                x=106001;
            }else if(data.submitted==true&&data.audit_status==106010){
                x=106010;
            }else if(data.submitted==true&&data.audit_status==106020){
                x=106020;
            }else if(data.submitted==true&&data.audit_status==106030){
                x=106030;
            }
            return x;
        },
        tableDrag(){
            let _this=this;
            _this.$comPlugIn.dragBoxInfo('box','line','taskContent')
        },
				
				//重构
			//当前选中任务
			changeBgc(item,index){
				this.taskindex = index;
				this.taskId = item.task_id;
				bus.$emit('TaskId',this.taskId);
			},
			//获取任务列表
			async obtainTask(){
				let parmes = {
					"page_size": 1000,
					"page_index": 1,
					"batch_id":this.$route.query.batch_id?parseInt(this.$route.query.batch_id):20,
				}
				let res = await this.TaskMangeService.getTask(parmes);
				if(res.code==200){
					let data = res.data.list;
					if(data==''){
						this.taskinfoData = null;
					}else{
						this.taskinfoData = data;
					}
						for(let k in data){
							data[k].edit = false;
							data[k].status = false;
						}
					this.taskData = data;
				}
			},
			
			//编辑任务列表
			async taskModify(obj,status){
				let parmes = {
					 'task_id' :obj.task_id,
					 'task_name':obj.task_name
				}
				if(status == true){
					let res = await this.TaskMangeService.editTask(parmes);
					if(res.code==200){
						this.$message({
							message: res.msg,
							type: 'success',
							duration:1000
						});
						this.obtainTask();
					}
				}
			},
			//删除任务列表
			async taskDelete(obj){
				let parmes = {
					'task_id' :obj.task_id,
				}
				let res = await this.TaskMangeService.deleteTask(parmes);
				if(res.code==200){
					this.$message({
						message: res.msg,
						type: 'success',
						duration:1000
					});
					this.obtainTask();
				}
			},
			//新建任务
			async newTask(){
				let taskCont={
					"task_name": this.taskInput,
					"batch_id":this.$route.query.batch_id?parseInt(this.$route.query.batch_id):20,
					"edit":false,
					"status":false
				};
				let res = await this.TaskMangeService.addTask(taskCont);
				if(res.code==200){
					this.dialogVisible = false;
						this.$message({
							message: res.msg,
							type: 'success',
							duration:1000
						});
						this.obtainTask();
				}else{
					this.$message({
						message: res.msg,
						type: 'warning',
						duration:1000
					});
				}

			},
			//任务状态
			taskStatus(obj){
				let x;
				switch (obj)
					{
						case 101010:x="新建";
						break;
						case 101020:x="待审核";
						break;
						case 101030:x="撤回";
						break;
						case 101040:x="审核通过";
						break;
						case 101050:x="驳回";
						break;
					}
				return x;
			},
			
			//关闭弹出框
			closeTask(){
				this.taskInput = '';
				this.dialogVisible = false;
			},
			//提交任务
			async submitTask(){
				let parmes = {
					"id": this.taskId
				}
				let res = await this.TaskMangeService.submitAudit(parmes);
				if(res.code==200){
						this.obtainTask();
				}
			},
			
			//table
			async taskTable(obj,datalist){
				if(obj == 'x1'){
					if(this.taskTableData!=''){
						bus.$emit('TableInfo',this.taskTableData);	
					}
				}else if(obj == 'x2'){
					let parmes = {
						"relation_id": datalist.relation_id
					}
					let res = await this.TaskMangeService.removeTask(parmes);
					if(res.code==200){
						this.$message({
							message: res.msg,
							type: 'success',
							duration:1000
						});
						this.NewList();
					}
				}else if(obj == 'x3'){
					this.NewList();
				}else if(obj == 'x4'){
					this.NewDataList.page_index = 1;
					this.NewDataList.is_modified=datalist;
					this.NewList();
				}else if(obj == 'x5'){
					if(this.taskTableList.rest!=undefined){
						let datas = [];
						datas.push(this.taskTableList)
						bus.$emit('TableInfo',datas);
					}
				} else if(obj == 'x6') {
                    // this.NewList();
                }
			}

    }
}
</script>

<style>
 @import '../../../static/css/task-moudel.css';
 .task-screen{
	 margin-bottom: 15px;
	 position: relative;
	 z-index: 999;
 }
 .addTask{
	  padding: 6px 10px 15px 0;
 }
 .taskList{
	 margin-top: 20px;
 }
 .taskTitle{
	  font-size: 16px;
    padding-bottom: 5px;
 }
 .taskCont{
	 overflow: hidden;
 }
 .taskCont .fl{
	float: left;
 }
 .taskCont li{
 	list-style: none;
	overflow: hidden;
	border-bottom: 1px solid #ddd;
  padding: 5px;
  margin-bottom: 8px;
	cursor: pointer;
 }
 .taskCont li:hover{
	 background:#f2f2f2;;
 }
 .taskCont i:nth-child(1){padding-right: 6px;}
 .taskCont .el-input{
	 width: calc(100% - 60px);
 }
 .taskCont span.txt em{
	  color: #409eff;
 }
 .taskCont .edit{
	 float: right;
 }
 .taskCont .edit i{
	 padding-right: 0;
 }
 .taskCont i{
 	cursor: pointer;
	padding-top: 4px;
  font-size: 15px;
  font-weight: 600;
 }
 .taskActive{
	  background: #f2f2f2;;
    padding: 3px 2px;
 }
 .Paginations{
	 float: right;
	 margin-left: 10px;
	 font-weight: initial;
 }
 .Paginations .menu3,.Paginations .menu2{
	 margin: 0 10px;
 } 
</style>



